forum

Home / DeveloperSection / Forums / Adding multiple class using ng-class

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

18-Jun-2024

Add multiple classes using ng-class

In AngularJS, you can use the ng-class directive to dynamically apply multiple classes to an element based on expressions in your controller or directly in your template. 

Here’s how you can do this.

 Use object syntax

You can use object syntax with ng-class where each key is a class name and its value is a boolean expression indicating whether the class should be used.

<div ng-class="{ 'class1': condition1, 'class2': condition2, 'class3': condition3 }">
 <!-- Content here -->
</div>

in the above syntax

class1, class2, and class3 are optional class names.
condition1, condition2, and condition3 are boolean expressions that specify the scope of your controller indicating whether each class should be used (true) or not (false).

Example

HTML

<div ng-class="{ 'red': isError, 'bold': isImportant, 'italic': isItalic }">
 <!-- Content here -->
</div>

Controller

$scope.isError = true;
$scope.isImportant = false;
$scope.isItalic = true;

In this case <div> have red and italic classes, because isError and isItalic are true, isImportant is false.

 

Array Syntax

You can also use an array syntax with ng-class where each element in the array is a class name added with no entry.

<div ng-class="[ 'class1', 'class2', 'class3' ]">
 <!-- Content here -->
</div>

Example- 

<div ng-class="[ 'alert', 'alert-' + type, { 'alert-dismissible': dismissible } ]">
 <!-- Content here -->
</div>

In the example above 

'alert' and 'alert-' + type are added with nothing as class.
{ 'alert-dismissible': dismissible } There is an object to add the alert-dismissible class if dismissible evaluates to true.

Combining Methods

You can also combine both methods for more flexibility.

<div ng-class="[ 'class1', { 'class2': condition2 }, 'class3' ]">
 <!-- Content here -->
</div>

In the example above

class1 is added unconditionally.
class2 is added if condition2 evaluates to true.
class3 is added unconditionally.

Example- 

here is a simple example to add/remove multiple classes using ng-class

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Apply Filter Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

    <style>
        /* styling the text based on classes */
        .highlight {
          background-color: yellow;
        }
        .italic {
          font-style: italic;
        }
        .underline {
          text-decoration: underline;
        }
      </style>
</head>

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <!-- text in which classes add/remove dynamically -->
        <h2 data-ng-class="{ 'highlight': isHighlighted, 'italic': isItalic, 'underline': isUnderlined }">
            Example Text
        </h2>
        <!-- multiple classes add dynamically based on checked -->
        <label><input type="checkbox" ng-model="isHighlighted" checked= "checked"> Highlight</label><br>
        <label><input type="checkbox" ng-model="isItalic"> Italic</label><br>
        <label><input type="checkbox" ng-model="isUnderlined"> Underline</label>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
            // by default all the classes is false
            $scope.isHighlighted = false;
            $scope.isItalic = false;
            $scope.isUnderlined = false;
        });

    </script>

</body>
</html>

Output- 
answer 6518921806072835
 

Also, Read: How to use a filter in a controller?

MindStick Training

Liked By